<template>
	<view class="kong" v-if="cart.length == 0">
		<view class="img">
			<image src="../../static/u=3078711296,3951093494&fm=253&fmt=auto&app=138&f=PNG.webp"></image>
		</view>
		<view class="text">购物车居然是空的~</view>
		<button type="default" @click="gotoHome">去逛逛</button>
	</view>
	<view class="cart" v-else>
		<!-- 收货地址 -->
		<my-address></my-address>
		<!-- 购物车标题区域 -->
		<view class="cart-title">
			<uni-icons type="cart" size="24"></uni-icons>
			<text>购物车</text>
		</view>
		<!-- 购物车列表区域 -->
		<uni-swipe-action>
			<block v-for="(item,i) in cart" :key="i">
				<uni-swipe-action-item :right-options="options" @click="handleClick(item)">
				 <my-goods :item="item" :showRadio="true" @radio-change="radioChange" @num-change="numChangeHandle" :showNumber="true"></my-goods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		
		<!-- 结算区域 -->
		<my-settle></my-settle>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/badge-tabbar.js'
	import { mapState, mapMutations } from 'vuex'
	export default {
	 mixins:[badgeMix],
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#c00000'
					}
		       }]
			}
		},
		computed:{
			...mapState('m_cart',['cart'])
		},
		methods:{
			...mapMutations('m_cart',['setRadioChange','setNumChange','removeGoods']),
			// 复选框选中事件
		  radioChange(e){ 
	        this.setRadioChange(e)
		  },
		  // 数字框选中事件
		  numChangeHandle(e){
			  // console.log(e)
			  this.setNumChange(e)
		  },
		  // 滑动删除商品事件
		  handleClick(item) {
			  // console.log(item)
			  this.removeGoods(item)
		  },
		  gotoHome() {
			  uni.switchTab({
			  	url:'/pages/home/home'
			  })
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.cart{
		display: flex;
		flex-direction: column;
		padding-bottom: 50px;
	}
   .cart-title{
	  
	   height: 30px;
	   border-bottom: 1px solid #efefef;
	   display: flex;
	   align-items: center;
	   text{
		   margin-left: 5px;
	   }
	   .uni-icons{
		   margin-left: 5px;
	   }
   }
   .kong{
	   margin-top:30% ;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   .text{
		   font-size: 16px;
		   color:darkgrey;
	   }
	   button{
		   margin-top: 5px;
		   width: 100px;
		   height: 30px;
		   line-height: 30px;
		   font-size: 12px;
	   }
   }
</style>
